<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/area.css" />
    <link rel="stylesheet" href="css/public.css" />
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="header">
      <div class="content flex">
        <div class="logo"><img src="images/newLogo.png" alt="" /></div>
        <div class="menu">
          <div class="menu_up"><img src="images/menu.png" alt="" /></div>
          <div class="menu_down none">
            <div class="down_head flex">
              <img src="images/newLogo.png" alt="" />
              <img src="images/close_b.png" class="closeMenu" alt="" />
            </div>
            <div class="topSearch">
              <input type="text" class="searchInput" placeholder="请输入关键" />
              <img src="images/search-b.png" alt="" />
            </div>
            <ul>
              <li><a href="">新闻中心</a></li>
              <li><a href="">培训课程</a></li>
              <li><a href="">特色项目</a></li>
              <li><a href="">师资列表</a></li>
              <li><a href="">关于我们</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="ToSignUp">
      <div class="setupbox">
        <div class="title">报名流程</div>
        <div class="center">
          <div class="Steps">
            <ul>
              <li class="tit check">填写资料</li>
              <li><img src="images/next.png" alt="" /></li>
              <li class="tit">确认订单</li>
              <li><img src="images/next.png" alt="" /></li>
              <li class="tit">支付费用</li>
              <li><img src="images/next.png" alt="" /></li>
              <li class="tit">报名</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="setupbox">
        <div class="title">填写资料</div>
        <div class="center">
          <div class="input">
            <div class="left">
              用户名（必填）
            </div>
            <div class="right">
              <input type="text" placeholder="请输入用户名" />
              <img src="images/right.png" alt="" />
            </div>
          </div>
          <div class="input">
            <div class="left">
              站内昵称（必填）
            </div>
            <div class="right">
              <input type="text" placeholder="请输入昵称" />
              <img src="images/right.png" alt="" />
            </div>
          </div>
          <div class="input">
            <div class="left">
              性别（必填）
            </div>
            <div class="">
              <select>
                <option value="volvo">男</option>
                <option value="saab">女</option>
              </select>
              <img src="images/right.png" alt="" />
            </div>
          </div>
          <div class="input">
            <div class="left">
              地区
            </div>
            <!-- 这里的地址json文件本地读取，放到服务器指定地址，然后修改一下area.js的地址就行 -->
            <div class="">
              <input
                type="text"
                id="getArea"
                placeholder="请选择地区"
                value="上海市,上海市,徐汇区"
                readonly
              />
              <img src="images/right.png" alt="" />
            </div>
          </div>
          <div class="input">
            <div class="left">
              地址（必填）
            </div>
            <div class="right">
              <textarea type="text" placeholder="请输入详细地址" /></textarea>
              <img src="images/right.png" alt="" />
            </div>
          </div>
          <div class="input">
            <div class="left">
              邮编（必填）
            </div>
            <div class="right">
              <input type="text" placeholder="请输入邮编" />
              <img src="images/right.png" alt="" />
            </div>
          </div>
          <div class="input">
            <div class="left">
              电话（必填）
            </div>
            <div class="right">
              <input type="text" placeholder="请输入联系方式" />
              <img src="images/right.png" alt="" />
            </div>
          </div>
          <div class="input">
            <div class="left">
              Email（必填）
            </div>
            <div class="right">
              <input type="text" placeholder="请输入email" />
              <img src="images/right.png" alt="" />
            </div>
          </div>
          <div class="input">
            <div class="left">
              身份证号（必填）
            </div>
            <div class="right">
              <input type="text" placeholder="请输入身份证号" />
              <img src="images/right.png" alt="" />
            </div>
          </div>
          <div class="input">
            <div class="left">
              单位（必填）
            </div>
            <div class="right">
              <input type="text" placeholder="请输入单位" />
              <img src="images/right.png" alt="" />
            </div>
          </div>
          <div class="input">
            <div class="left">
              单位性质（必填）
            </div>
            <div class="right">
              <select>
                <option value="1">国企</option>
                <option value="2">私企</option>
                <option value="3">个体户</option>
                <option value="4">自由职业</option>
                <option value="5">学生</option>
              </select>
              <img src="images/right.png" alt="" />
            </div>
          </div>
          <div class="input">
            <div class="left">
              岗位（必填）
            </div>
            <div class="right">
              <input type="text" placeholder="请输入岗位" />
              <img src="images/right.png" alt="" />
            </div>
          </div>
          <div class="input">
            <div class="left">
              知识产权相关工作年限
            </div>
            <div class="right">
              <select>
                <option value="0">无</option>
                <option value="1">1-3</option>
                <option value="2">3-5</option>
                <option value="3">5-10</option>
                <option value="4">10年以上</option>
              </select>
              <img src="images/right.png" alt="" />
            </div>
          </div>
          <div class="input">
            <div class="left">
              学历
            </div>
            <div class="right">
              <select>
                <option value="0">初中以下</option>
                <option value="1">初中</option>
                <option value="2">高中</option>
                <option value="3">专科</option>
                <option value="4">大专</option>
                <option value="4">本科</option>
                <option value="4">本科以上</option>
              </select>
              <img src="images/right.png" alt="" />
            </div>
          </div>
          <div class="input">
            <div class="left">
              专业
            </div>
            <div class="right">
              <input type="text" placeholder="请输入专业" />
              <img src="images/right.png" alt="" />
            </div>
          </div>
          <div class="input">
            <div class="left">
              擅长领域
            </div>
            <div class="right">
              <div class="checkbox">
                <span
                  ><input type="checkbox" /><label for=""
                    >知识产权诉讼</label
                  ></span
                >
                <span
                  ><input type="checkbox" /><label for=""
                    >企业知识产权</label
                  ></span
                >
                <span
                  ><input type="checkbox" /><label for=""
                    >知识产权运营</label
                  ></span
                >
                <span
                  ><input type="checkbox" /><label for="">专利申请</label></span
                >
                <span
                  ><input type="checkbox" /><label for="">商标申请</label></span
                >
                <span><input type="checkbox" /><label for="">其他</label></span>
              </div>
            </div>
          </div>
          <div class="input">
            <div class="left">
              持有证件
            </div>
            <div class="right">
              <div class="checkbox">
                <span
                  ><input type="checkbox" name="1" /><label for="1"
                    >代理师证</label
                  ></span
                >
                <span
                  ><input type="checkbox" /><label for=""
                    >工程培训证书</label
                  ></span
                >
                <span
                  ><input type="checkbox" /><label for=""
                    >技术经理人</label
                  ></span
                >
                <span><input type="checkbox" /><label for="">其他</label></span>
              </div>
            </div>
          </div>
          <div class="input">
            <div class="left">
              是否住宿
            </div>
            <div class="right">
              <div class="radio">
                <div><input name="WhetherAccommodation" type="radio" />是</div>
                <div><input name="WhetherAccommodation" type="radio" />否</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="setupbox">
        <div class="title">支付方式</div>
        <div class="center">
          <div class="pay">
            <div class="smallbox flex flex_center">
              <div class="left">微信支付</div>
              <div class="right"><input type="radio" /></div>
            </div>
            <div class="smallbox flex flex_center">
              <div class="left">支付宝支付</div>
              <div class="right"><input type="radio" /></div>
            </div>
          </div>
          <div class="paybtn flex">
            <div class="left">290.00</div>
            <div class="right"><button class="sub">立即支付</button></div>
          </div>
        </div>
      </div>
    </div>
    <div class="foot">
      <a class="sy checked"><span></span><i>首页</i></a>
      <a class="kc"><span></span><i>我的课程</i></a>
      <a class="grzx"><span></span><i>个人中心</i></a>
    </div>
  </body>
  <script src="js/jquery-1.12.0.min.js"></script>
  <script src="js/area.js"></script>
  <script src="js/public.js"></script>
  <script>
    $(function () {
      $("#getArea").getArea({
        defaultArea: [18, 2, 3],
        inpEle: "#getArea",
        normalArea: true,
      });
    });
  </script>
</html>
